<template>
  <transition name="food">
    <div class="food" ref="food" v-show="showthis">
      <!-- 为bettter scroll 添加div层 -->
      <div>
        <!-- 商品图片 -->
        <div class="foodImg"><img src="~assets/img/鱼.jpg" alt="" /></div>
        <!-- 返回到商品foods.vue页面 -->
        <div class="backGoods" @click="hidethisfood">
          <img src="~assets/img/箭头.png" alt="" />
        </div>
        <!-- 商品信息 -->
        <div class="foodInfo">
          <div class="goodsName">{{ selectedfood.name }}</div>
          <div class="goodsx">销量:{{ selectedfood.month_sales }}</div>
          <div class="goodsp">评分:{{ selectedfood.rating }}</div>
          <div class="foodsPrice">￥10</div>
          <transition name="firstAdd">
            <div class="addtocart">加入购物车</div>
          </transition>
        </div>

        <!-- 商品介绍 -->
        <div class="foodDetail">
          <h1 class="food-header">商品介绍</h1>
          <div class="food-content">{{ selectedfood.description }}</div>
        </div>

        <!-- 商品评价 -->
        <div class="foodAsses">
          <h1 class="Asses-header">商品评价</h1>
          <div class="classification">
            <span>全部 3</span>
            <span>推荐 2</span>
            <span>吐槽 1</span>
          </div>
          <div class="onlyContent" @click="_onlyshowcon">
            <img v-if="isShow" src="~assets/img/勾选0.png" alt="" />
            <img v-else src="~assets/img/勾选1.png" alt="" /><span
              :class="{ text: !isShow }"
              >只看有内容的评价</span
            >
          </div>
          <div class="select-content">
            <div>好吃好吃好吃好吃</div>
            <div>难吃难吃难吃难吃</div>
            <div>不错不错不错不错</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "food",
  data() {
    return {
      isShow: true,
      showthis: false,
    };
  },
  props: {
    selectedfood: {
      type: Object,
    },
  },
  methods: {
    hidethisfood() {
      // 隐藏这个详情页面
      this.showthis = false;
    },
    _onlyshowcon() {
      this.isShow = !this.isShow;
    },

    showthisfood() {
      this.showthis = true;
      //初始化筛选内容
      this.isShow = true;
      this.$nextTick(() => {
        //better scroll需要更新DOM对象
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.food, {
            click: true,
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
  },
};
</script>

<style scoped>
.food {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 46px;
  z-index: 99999;
  overflow: hidden;
  background-color: rgb(243, 243, 243);
}
.food-enter-active,
.food-leave-active {
  transition: all 0.4s;
}

.food-enter,
.food-leave-to {
  transform: translate3d(100%, 0, 0);
}

.food .foodImg img {
  width: 100%;
  height: 40%;
}

.food .backGoods img {
  display: inline-block;
  width: 40px;
  height: 40px;
  transform: rotate(90deg);
  position: absolute;
  top: 10px;
}
.food .foodInfo {
  background-color: #fff;
  padding: 10px 20px;
  position: relative;
}
.food .foodInfo div {
  margin-bottom: 5px;
}
.food .foodInfo .goodsName {
  font-size: 15px;
  font-weight: bolder;
}
.food .foodInfo .goodsx {
  font-size: 12px;
  color: rgb(109, 109, 109);
}
.food .foodInfo .goodsp {
  font-size: 12px;
  color: rgb(109, 109, 109);
}
.food .foodInfo .foodsPrice {
  font-size: 16px;
  margin-top: 10px;
  color: rgb(158, 22, 22);
}

.food .foodInfo .addtocart {
  position: absolute;
  bottom: 10px;
  color: #fff;
  background-color: #009be2;
  padding: 6px;
  height: 15px;
  line-height: 15px;
  border-radius: 15px;
  right: 10px;
  font-size: 13px;
}

.food .foodDetail {
  background-color: #fff;
  margin: 15px 0;
  padding: 15px;
}
.food .foodDetail .food-header {
  margin: 5px 0;
  font-size: 15px;
  font-weight: bolder;
}

.food .foodAsses {
  background-color: #fff;
  padding: 15px;
}
.food .foodAsses > div {
  border-bottom: 1px solid rgb(226, 226, 226);
}
.food .foodAsses h1 {
  font-size: 15px;
  font-weight: bolder;
  margin-bottom: 5px;
}
.food .foodAsses .classification {
  padding-bottom: 10px;
}
.food .foodAsses .classification span {
  display: inline-block;
  width: fit-content;
  height: 15px;
  background-color: #009ae25b;
  padding: 6px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.food .foodAsses .onlyContent {
  padding: 10px;
  color: rgb(130, 130, 130);
}
.food .foodAsses .onlyContent .text {
  color: #009be2;
}
.food .foodAsses .onlyContent img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.select-content > div {
  margin: 2px;
  padding: 16px 0px;
  border-bottom: 1px solid rgb(226, 226, 226);
}
</style>